<template>
  <div>
    <canvas class="loginDraw" width="750" height="750"></canvas>
    <div id="login">
      <div class="loginContent">
        <div class="titleImg">
          <img src="/image/title.png" alt="" style="margin-bottom: 50px">
        </div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="账号" prop="id">
            <el-input type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="submitForm('ruleForm')" >连接</el-button>
            <el-button type="info" @click="resetForm('ruleForm')" >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getStore, setStore } from "../../untils/storage";
const jwt = require('jsonwebtoken')

export default {
  data() {
    let validateId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号id'));
      }  else {
        let reg = /^[a-zA-Z0-9_-]{4,16}$/
        if(reg.test(value)) {
          callback();
        }
        else {
          callback(new Error('4-16位，A-Z、a-z、1-9、-_组成'));
        }
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        id: '',
        pass: '',
      },
      rules: {
        id: [
          { validator: validateId, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // const res = this.axios.post('/api/login', this.ruleForm);
          // if(res.data.code === 200) {
          //   console.log('success');
          // }
          setStore('token', jwt.sign({ username: this.ruleForm.id }, 'abcd', {
            expiresIn: '3000s'
          }));
          setStore('id', this.ruleForm.id);
          if(!getStore('active')) {
            setStore('active', 1);
          }
          this.$router.push({ path: this.getRedirect('redirect') })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 设置背景canvas
    getAmiy() {
      let am =  document.querySelector(".loginDraw");
      let amiy = am.getContext("2d");
      let img = new Image();
      img.src = "/image/Amiya.png";
      img.onload = function() {
        amiy.drawImage(img,0,0,750,750);
      }
    },
    // 获取地址栏参数
    getRedirect(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return '/';
    }
  },
  mounted() {
    this.getAmiy();
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/common";

.loginDraw {
  //transform:scale(1);
  position: absolute;
  //z-index: -1;
}

#login {
  width: 100%;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginContent {
    width: 500px;
    height: 510px;
    border: 4px solid #1a1a1a;
    border-radius: 2% 2% 2% 2% / 4% 4% 4% 4%;
    text-align: center;
    .demo-ruleForm {
      width: 400px;
      .el-form-item, .el-button {
        color: white;
        font-weight: bold;
        letter-spacing: 5px;
      }
    }
  }
}
</style>